<template>
  <h1>答题情况柱状图</h1>
  <div id="Bar" style="width:1500px;height:500px;margin:auto;"></div>
  <h1>答题情况饼图</h1>
  <div id="Pie" style="width:1500px;height:500px;margin:auto;"></div>
  <h1>答题人数统计</h1>
  <div id="Point" style="width:1500px;height:500px;margin:auto;"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import {onMounted} from "vue";

export default {
  setup() {
    onMounted(() => { // 需要在页面加载完毕后展示图表，这里使用Vue3的组合式生命周期钩子 onMounted()
      let Bar = echarts.init(document.getElementById("Bar"));
      let Pie = echarts.init(document.getElementById("Pie"));
      let Point = echarts.init(document.getElementById("Point"));
      Point.setOption(
          {
            title: {
              text: 'Stacked Line'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['群组 1', '群组 2', '群组 3', '群组 4', '群组 5', '群组 6', '群组 7', '群组 8', '群组 9']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: ['Day1', 'Day2', 'Day3', 'Day4', 'Day5']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '群组 1',
                type: 'line',
                stack: 'Total',
                data: [10, 14, 20, 24, 30]
              },
              {
                name: '群组 2',
                type: 'line',
                stack: 'Total',
                data: [8, 18, 28, 28, 28]
              },
              {
                name: '群组 3',
                type: 'line',
                stack: 'Total',
                data: [15, 18, 20, 23, 26]
              },
              {
                name: '群组 4',
                type: 'line',
                stack: 'Total',
                data: [12, 14, 20, 23, 24]
              },
              {
                name: '群组 5',
                type: 'line',
                stack: 'Total',
                data: [8, 14, 19, 22, 22]
              },
              {
                name: '群组 6',
                type: 'line',
                stack: 'Total',
                data: [5, 10, 19, 19, 20]
              },
              {
                name: '群组 7',
                type: 'line',
                stack: 'Total',
                data: [12, 18, 18, 18, 18]
              },
              {
                name: '群组 8',
                type: 'line',
                stack: 'Total',
                data: [8, 9, 14, 14, 16]
              },
              {
                name: '群组 9',
                type: 'line',
                stack: 'Total',
                data: [14, 17, 20, 22, 25]
              },
            ]
          }
      )
      Pie.setOption(
          {
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              left: 'left',
              top: 'top',
            },
            toolbox: {
              show: true,
              feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            series: [
              {
                name: 'Radius Mode',
                type: 'pie',
                radius: [20, 140],
                center: ['25%', '50%'],
                roseType: 'radius',
                itemStyle: {
                  borderRadius: 5
                },
                label: {
                  show: true
                },
                emphasis: {
                  label: {
                    show: true
                  }
                },
                data: [
                  {value: 12, name: '问卷 1 答题人数'},
                  {value: 24, name: '问卷 2 答题人数'},
                  {value: 20, name: '问卷 3 答题人数'},
                  {value: 17, name: '问卷 4 答题人数'},
                  {value: 16, name: '问卷 5 答题人数'},
                  {value: 12, name: '问卷 6 答题人数'},
                  {value: 14, name: '问卷 7 答题人数'},
                  {value: 21, name: '问卷 8 答题人数'}
                ]
              },
              {
                name: 'Area Mode',
                type: 'pie',
                radius: [20, 140],
                center: ['75%', '50%'],
                roseType: 'area',
                itemStyle: {
                  borderRadius: 5
                },
                data: [
                  {value: 30, name: '群组 1 人数'},
                  {value: 28, name: '群组 2 人数'},
                  {value: 26, name: '群组 3 人数'},
                  {value: 24, name: '群组 4 人数'},
                  {value: 22, name: '群组 5 人数'},
                  {value: 20, name: '群组 6 人数'},
                  {value: 18, name: '群组 7 人数'},
                  {value: 16, name: '群组 8 人数'},
                  {value: 25, name: '群组 9 人数'}
                ]
              }
            ]
          }
      )
// 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      Bar.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['群组 9 ', '群组 8 ', '群组 7 ', '群组 6 ', '群组 5 ', '群组 4 ', '群组 3 ', '群组 2 ', '群组 1 ']
        },
        series: [
          {
            name: '男性人数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [14, 10, 4, 10, 15, 13, 20, 15, 19]
          },
          {
            name: '女性人数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [11, 6, 14, 10, 7, 11, 6, 13, 11]
          },
        ]
      });
      window.onresize = function () { // 自适应大小
        Bar.resize();
      };
    });
  }
}
</script>

